// 道具信息
let templateDiv = `<label>道具信息</label>
            <div class="content">
                <div>
                    <label>喷雾</label><input id="prop_fog" class="ckb" type="checkbox">
                </div>
                <div >
                    <label>彩球</label><input id="prop_colorful" class="ckb" type="checkbox">
                </div>
                <div>
                    <label>闪电球</label><input id="prop_lighting" class="ckb" type="checkbox">
                </div>
                <div >
                    <label>流星雨</label><input id="prop_meteor" class="ckb" type="checkbox">
                </div>
                <div >
                    <label>炸弹</label><input id="prop_bomb" class="ckb" type="checkbox">
                </div>
                <div >
                    <label>死神盾牌</label><input id="prop_defDeath" class="ckb" type="checkbox">
                </div>
                <div >
                    <label>烟雾盾牌</label><input id="prop_defFog" class="ckb" type="checkbox">
                </div>
            </div>`;


let BaseView = require('../BaseView');
let doubleBind = require('../../doubleBind');

class PropView extends BaseView {

    constructor() {
        super();
        this.rootEl = document.createElement('div');
        this.rootEl.classList.add('border');
        this.rootEl.innerHTML = templateDiv;

        this.bindModel();
        this.reset();
    }

    bindModel() {
        // 进行双向绑定?
        // 需要绑定哪些字段?
        let lst = [];
        lst.push({
            el:this.rootEl.querySelector('#prop_fog'),
            name:'fog',
            domName:'checkbox',
            bNumber:false,
        });
        lst.push({
            el:this.rootEl.querySelector('#prop_colorful'),
            name:'colorful',
            domName:'checkbox',
            bNumber:false,
        });
        lst.push({
            el:this.rootEl.querySelector('#prop_lighting'),
            name:'lighting',
            domName:'checkbox',
            bNumber:false,
        });
        lst.push({
            el:this.rootEl.querySelector('#prop_meteor'),
            name:'meteor',
            domName:'checkbox',
            bNumber:false,
        });
        lst.push({
            el:this.rootEl.querySelector('#prop_bomb'),
            name:'bomb',
            domName:'checkbox',
            bNumber:false,
        });
        lst.push({
            el:this.rootEl.querySelector('#prop_defDeath'),
            name:'defDeath',
            domName:'checkbox',
            bNumber:false,
        });
        lst.push({
            el:this.rootEl.querySelector('#prop_defFog'),
            name:'defFog',
            domName:'checkbox',
            bNumber:false,
        });

        this.model = {};
        lst.forEach(item=>{
            doubleBind(this.model,item);
        });
    }

    reset(){
        this.model.fog = 0;
        this.model.colorful = 0;
        this.model.lighting = 0;
        this.model.meteor = 0;
        this.model.bomb = 0;
        this.model.defDeath = 0;
        this.model.defFog = 0;
    }

    // getModel(){
    //     return this.model;
    // }

    // init(model){
    //     this.fogEl.checked = !!model.fog;
    //     this.colorfulEl.checked = !!model.colorful;
    //     this.lightingEl.checked = !!model.lighting;
    //     this.meteorEl.checked = !!model.meteor;
    //     this.bombEl.checked = !!model.bomb;
    //     this.defDeathEl.checked = !!model.defDeath;
    //     this.defFogEl.checked = !!model.defFog;
    // }

    parseProp(propData){
        this.model.fog = !!propData.fog;
        this.model.colorful = !!propData.colorful;
        this.model.lighting = !!propData.lighting;
        this.model.meteor = !!propData.meteor;
        this.model.bomb = !!propData.bomb;

        this.model.defDeath = !!propData.defDeath;
        this.model.defFog = !!propData.defFog;
    }

    getPropModel(){
        return {
            fog:this.model.fog,
            colorful:this.model.colorful?1:0,
            lighting:this.model.lighting?1:0,
            meteor:this.model.meteor?1:0,
            bomb:this.model.bomb?1:0,
            defDeath:this.model.defDeath?1:0,
            defFog:this.model.defFog?1:0
        };
    }
}

module.exports = PropView;
